<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系管理员 - 新闻发布系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <nav class="navbar">
        <div class="navbar-brand">
            <i class="fas fa-newspaper"></i>
            <span>新闻发布系统</span>
        </div>
        <div class="navbar-actions">
            <ul class="nav-links">
                <li><a href="index.jsp"><i class="fas fa-newspaper"></i> 查看新闻</a></li>
                <li><a href="publish.jsp"><i class="fas fa-edit"></i> 发布新闻</a></li>
                <li><a href="manage.jsp"><i class="fas fa-cog"></i> 新闻管理</a></li>
                <li><a href="login.jsp"><i class="fas fa-user"></i> 管理员登录</a></li>
                <li><a href="contact.jsp" class="active"><i class="fas fa-envelope"></i> 联系管理员</a></li>
            </ul>
            <div class="clock-container">
                <i class="fas fa-clock"></i>
                <div class="clock-time" id="clockTime">00:00:00</div>
                <div class="clock-date" id="clockDate">2024-03-15</div>
            </div>
            <button class="theme-toggle" id="themeToggle" title="切换主题">
                <i class="fas fa-moon"></i>
            </button>
        </div>
    </nav>

    <div class="container">
        <div class="contact-container">
            <h1><i class="fas fa-envelope"></i> 联系管理员</h1>
            <div class="contact-info">
                <div class="contact-card">
                    <i class="fas fa-phone"></i>
                    <h3>电话联系</h3>
                    <p>客服热线：400-123-4567</p>
                    <p>工作时间：周一至周五 9:00-18:00</p>
                </div>
                <div class="contact-card">
                    <i class="fas fa-envelope"></i>
                    <h3>邮件联系</h3>
                    <p>管理员邮箱：admin@news.com</p>
                    <p>技术支持：support@news.com</p>
                </div>
                <div class="contact-card">
                    <i class="fas fa-comments"></i>
                    <h3>在线留言</h3>
                    <p>工作时间：24小时在线</p>
                    <p>响应时间：2小时内</p>
                </div>
            </div>

            <form id="contactForm" class="contact-form">
                <div class="form-group">
                    <label for="name"><i class="fas fa-user"></i> 您的姓名</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email"><i class="fas fa-envelope"></i> 电子邮箱</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="subject"><i class="fas fa-tag"></i> 主题</label>
                    <select id="subject" name="subject" required>
                        <option value="">请选择主题</option>
                        <option value="feedback">意见反馈</option>
                        <option value="report">问题报告</option>
                        <option value="cooperation">商务合作</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="message"><i class="fas fa-comment"></i> 留言内容</label>
                    <textarea id="message" name="message" rows="6" required></textarea>
                </div>
                <button type="submit" class="submit-btn">
                    <i class="fas fa-paper-plane"></i> 发送留言
                </button>
            </form>
        </div>
    </div>

    <script>
        // 时钟功能
        function updateClock() {
            const now = new Date();
            const timeElement = document.getElementById('clockTime');
            const dateElement = document.getElementById('clockDate');

            // 更新时间
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            timeElement.textContent = `${hours}:${minutes}:${seconds}`;

            // 更新日期
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            dateElement.textContent = `${year}-${month}-${day}`;
        }

        // 初始化时钟并每秒更新
        updateClock();
        setInterval(updateClock, 1000);

        // 主题切换功能
        const themeToggle = document.getElementById('themeToggle');
        const themeIcon = themeToggle.querySelector('i');
        
        // 检查本地存储中的主题设置
        const currentTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-theme', currentTheme);
        updateThemeIcon(currentTheme);

        themeToggle.addEventListener('click', () => {
            const newTheme = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
            document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            updateThemeIcon(newTheme);
        });

        function updateThemeIcon(theme) {
            themeIcon.className = theme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
        }

        // 表单提交处理
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = {
                name: document.getElementById('name').value,
                email: document.getElementById('email').value,
                subject: document.getElementById('subject').value,
                message: document.getElementById('message').value
            };

            // 这里添加发送留言的逻辑
            console.log('发送留言:', formData);
            
            // 显示成功消息
            alert('您的留言已发送成功！我们会尽快回复您。');
            
            // 重置表单
            this.reset();
        });
    </script>
</body>
</html> 